import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image, Button, Picker } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.less'
import { format } from '@/utils';

const sexList = ['男','女']
export default function MineSetting(props) {
  const endDate = format(Date.now())
  const {router} = Taro.getCurrentInstance()
  const type = router.params.type || 'person'
  const [info,setInfo] = useState({})
  useDidShow(()=>{
    Taro.$get('/mb/users').then(res=>{
      if(res.code == '1') setInfo(res.content)
    })
  })
  const handleChangeSex = async (e,type) => {
    let data = {}
    if(type == 'genderName'){
      data = {
        genderName:sexList[e.detail.value]
      }
    }
    if(type == 'birthday'){
      data = {
        birthday:e.detail.value
      }
    }
    const res = await Taro.$put('/mb/users',data,1)
    if(res.code == '1'){
      Taro.$toast('修改成功')
      Taro.setStorageSync('user',{
        ...Taro.getStorageSync('user'),
        ...data
      })
      setInfo({...info,...data})
    }else{
      Taro.$toast(res.message)
    }
  }
  const handleChange = (e)=>{ ///  点击修改资料
    Taro.navigateTo({
      url:`/mineSubPack/mine-change/index?type=${e}`
    })
  }
  return (
    <View className="mine-setting">
      {type === 'person'?
      <View className="setting-card">
        <View className='h2'>个人资料</View>
        <View className="card-list">
          <View className="list-item" onClick={()=>{handleChange('nickName')}}>
            <View className='h3'>昵称</View>
            <View className='p'>{info.nickName}</View>
            <View className="at-icon at-icon-chevron-right"></View>
          </View>
          <Picker mode="selector" range={sexList} onChange={(e)=>{handleChangeSex(e,'genderName')}}>
            <View className="list-item">
              <View className='h3'>性别</View>
              <View className='p'>{info.genderName || '保密'}</View>
              <View className="at-icon at-icon-chevron-right"></View>
            </View>
          </Picker>
          <Picker mode="date" onChange={(e)=>{handleChangeSex(e,'birthday')}} end={endDate}>
            <View className="list-item">
              <View className='h3'>生日</View>
              <View className='p'>{info.birthday || '保密'}</View>
              <View className="at-icon at-icon-chevron-right"></View>
            </View>
          </Picker>
        </View>
      </View>:null}
      {type === 'safe'?
      <View className="setting-card">
        <View className='h2'>账号安全</View>
        <View className="card-list">
          <View className="list-item">
            <View className='h3'>手机号</View>
            <View className='p'>{info.mobile}</View>
            <View className="at-icon at-icon-chevron-right"></View>
          </View>
          <View className="list-item" onClick={()=>{handleChange('password')}}>
            <View className='h3'>修改账号密码</View>
            <View className="at-icon at-icon-chevron-right"></View>
          </View>
        </View>
      </View>:null}
    </View>
  )
}